<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height:3000px; 
        }
        .imgbox{
            margin-top: 1000px;
            margin-left:150px;
            background-color: #ccc;
            height:600px;
            width:300px;
        }
        img{
            height:600px;
            width:300px;
        }
        img[src=""]{
            display: none;
        }
    </style>
</head>
<body>
  

    <div class="imgbox">
         <img src=""  data-src="images/1111.jpg" alt="">
    </div>
    <script>
        let imgbox=document.querySelector(".imgbox");
        let img=document.querySelector("img");

        function loadimg(){//加载图片
            console.log("111");
           let dataSrc=img.getAttribute("data-src");
           let newimg=new Image;
           newimg.src=dataSrc;
           newimg.onload=function(){
               img.src=dataSrc;
               //img.removeAttribute("data-src");
               newimg=null;
               img.flag=true;//图片已加载
           }
        }

        let ob=new IntersectionObserver(changes=>{
           if(changes[0].isIntersecting){//true---完全出现--加载图片
              if(img.flag){
                ob.unobserve(changes[0].target);
                return;
              }
              loadimg()
           }
        },{
            threshold:[1]//默认0    0-1
        })
        //0 一打开页面 露头      完全消失
        //1 一打开页面 完全出现  离开头
        ob.observe(imgbox);
    </script>
</body>
</html>